<template>
    <div class="person-list-box">
        <div class="person-list-top">
            <div class="publicity">工作人员去向公示</div>
            <div class="count">{{statisticsData.onlineNum}}/{{statisticsData.personNum}}</div>
        </div>
        <div class="person-list">
            <div class="person-list-item" v-for="(item,index) in personList" :key="index">
                <img src="/static/images/person_bg.png">
                <img class="avatar" :src="item.avatar">
                <div class="person-info">
                    <div class="name">姓&nbsp;&nbsp;&nbsp;名: {{item.nickname || ''}}</div>
                    <div class="posison">职&nbsp;&nbsp;&nbsp;务: {{item.positionName || ''}}</div>
                    <div class="office">办公室: {{item.address || ''}}</div>
                </div>
                <div class="stata" :class="[item.status == 0?'item-stata-green':'item-stata-red']">{{item.stata}}</div>
                <img class="danghui" src="/static/images/danghui.png" v-if="item.isParty == 0">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        statisticsData:{
            type: Object,
            default: {}
        },
        personList:{
            type: Array,
            default: []
        }
    }
}
</script>

<style lang="scss" scoped>
    .person-list-box{
        margin-top: 10rpx;
        padding: 0 15rpx;
        .person-list-top{
            padding: 0 4rpx;
            height: 62rpx;
            line-height: 62rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .publicity{
                font-size:30rpx;
                font-weight:bold;
                color:rgba(82,82,82,1);
            }
            .count{
                font-size:24rpx;
                font-weight:bold;
                color:rgba(132,132,132,1);
            }
        }
        .person-list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            max-height: 80vh;
            overflow: scroll;
            padding-bottom: 520rpx;
            .person-list-item{
                width:354rpx;
                height:154rpx;
                margin-bottom: 20rpx;
                box-shadow:4rpx 7rpx 5rpx 0px rgba(62,62,62,0.43);
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                }
                .avatar{
                    width:102rpx;
                    height:122rpx;
                    position: absolute;
                    left: 15rpx;
                    top: 16rpx;
                    z-index: 2;
                }
                .person-info{
                    position: absolute;
                    left: 136rpx;
                    top: 16rpx;
                    font-size:22rpx;
                    font-weight:bold;
                    color:rgba(34,34,34,1);
                    z-index: 2;
                    >div{
                        margin-bottom: 9rpx;
                    }
                }
                .stata{
                    width:59rpx;
                    height:59rpx;
                    box-shadow:0rpx 2rpx 12rpx 1rpx rgba(100,100,100,0.44);
                    border-radius:50%;
                    text-align: center;
                    line-height: 59rpx;
                    position: absolute;
                    right: 16rpx;
                    bottom: 13rpx;
                    font-size:20rpx;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    z-index: 2;
                }
                .item-stata-red{
                    background-color: #e71f19;
                }
                .item-stata-green{
                    background-color: #068e5c;
                }
                .danghui{
                    position: absolute;
                    top: 19rpx;
                    left: 19rpx;
                    width: 18rpx;
                    height: 17rpx;
                    z-index: 3;
                }
            }
        }
    }
</style>